<!doctype html>
<html lang="zh_CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>layOut</title>
    <link href="./assset/bootstrap@5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        div.container,div.container-fluid{
            border:1px solid black;
            height: auto;
        }

        .row>div{
            border:1px solid red;
            height: 30px;
        }

 
    </style>
  </head>
  <body>
    
    <div class="container">
     <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
     </div>
     <div class="row">
        <div class="col-4">col-4</div>
        <div class="col-6">col-6</div>
        <div class="col-2">col-2</div> 
     </div>
     <div class="row">
        <div class="col-3">col-3</div>
        <div class="col-6">col-6</div>
        <div class="col-4">col-4</div> 
     </div>
         
    </div>

    <p>col-sm-12 col-md-4 col-lg-2</p>
    <div class="container mt-5">
        <div class="row">
            <div class="col-sm-12 col-md-4 col-lg-2">col-3</div>
        </div>
        <div class="row">
            <div class="col-md-4">col-md-4</div>
        </div>

        <div class="row">
            <div class="col-sm-4 col-md-3">col-sm-4 col-md-3</div>
            <div class="col-sm-8 col-md-6">col-sm-8 col-md-6</div>
            <div class="d-none d-md-block col-md-3">col-md-6</div>
        </div>
    </div>

    <div class="container mt-5">
        <div class="row justify-content-center align-items-center"  style="height: 120px;">
            <div class="col-6">
                col-6
            </div>
        </div>

    </div>

    <div class="container-fluid"></div>


    <script src="./assset/bootstrap@5.3.0/js/bootstrap.bundle.min.js"></script>
  </body>
</html>